<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Hospice a Medical Category Flat bootstrap Responsive website Template | Portfolio :: w3layouts</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!--web-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!--//web-font-->
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hospice Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
	Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!-- //js -->	
<!-- start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!--//end-smoth-scrolling-->
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="container">
			<div class="top-middle">
				<a href="index.html">
					<h3>Hospice</h3>
				</a>	
			</div>
			<div class="top-nav">
				<span class="menu"><img src="images/menu-icon.png" alt=""/></span>		
				<ul class="nav1">
					<li><a href="index.html">Home</a></li>
					<li><a href="about.html">About Us</a></li>
					<li><a href="features.html">Features</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="portfolio.html" class="active">Portfolio</a></li>
					<li><a href="contact.html" >Contact Us</a></li>
				</ul>
				<!-- script-for-menu -->
				 <script>
				   $( "span.menu" ).click(function() {
					 $( "ul.nav1" ).slideToggle( 300, function() {
					 // Animation complete.
					  });
					 });
				</script>
				<!-- /script-for-menu -->
			</div>	
			<div class="clearfix"> </div>
		</div>	
	</div>
	<!--//header-->
	<!--portfolio-->
	<div class="portfolios">
		<div class="container">
			<div class="work-title">
				<h3>OUR<span>PORTFOLIO</span></h3>
			</div>
			<ul id="filters" class="clearfix">
				<li><span class="filter active" data-filter="app card icon web">ALL</span></li>
				<li><span class="filter" data-filter="app">CATEGORY 1</span></li>
				<li><span class="filter" data-filter="card">CATEGORY 2</span></li>
				<li><span class="filter" data-filter="icon">CATEGORY 3</span></li>
				<li><span class="filter" data-filter="web">CATEGORY 4</span></li>
			</ul>
			<div id="portfoliolist">
				<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img19.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img19.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>					
							</div>
						</a>
					</div>
				</div>				
				<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img20.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
						<img class="img-responsive" src="images/img20.jpg" />
						<div class="b-wrapper">
						<h2 class="b-animate b-from-left    b-delay03 ">
						<img class="img-responsive" src="images/e.png" class="zoom" alt=""/></h2>
						
						</div></a>
					</div>
				</div>	
				<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img21.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
						<img class="img-responsive" src="images/img21.jpg" />
						<div class="b-wrapper">
						<h2 class="b-animate b-from-left    b-delay03 ">
						<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
						</h2>
						
						</div></a>
					</div>
				</div>
				<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img22.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img22.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>
							</div>
						</a>
					</div>
				</div>
				<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img23.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img23.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>
							</div>
						</a>
					</div>
				</div>				
				<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img24.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
						<img class="img-responsive" src="images/img24.jpg" />
						<div class="b-wrapper">
						<h2 class="b-animate b-from-left    b-delay03 ">
						<img class="img-responsive" src="images/e.png" class="zoom" alt=""/></h2>
						
						</div></a>
					</div>
				</div>	
				<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img25.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
						<img class="img-responsive" src="images/img25.jpg" />
						<div class="b-wrapper">
						<h2 class="b-animate b-from-left    b-delay03 ">
						<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
						</h2>
						
						</div></a>
					</div>
				</div>
				<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img26.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img26.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>					
							</div>
						</a>
					</div>
				</div>
				<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img27.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img27.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>
							</div>
						</a>
					</div>
				</div>				
				<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img28.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
						<img class="img-responsive" src="images/img28.jpg" />
						<div class="b-wrapper">
						<h2 class="b-animate b-from-left    b-delay03 ">
						<img class="img-responsive" src="images/e.png" class="zoom" alt=""/></h2>
						
						</div></a>
					</div>
				</div>	
				<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img29.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img29.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>
							</div>
						</a>
					</div>
				</div>
				<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
					<div class="portfolio-wrapper">		
						<a href="images/img30.jpg" class="b-link-stripe b-animate-go   swipebox"  title="">
							<img class="img-responsive" src="images/img30.jpg" />
							<div class="b-wrapper">
								<h2 class="b-animate b-from-left    b-delay03 ">
									<img class="img-responsive" src="images/e.png" class="zoom" alt=""/>
								</h2>
							</div>
						</a>
					</div>
				</div>
			</div>	
				<link rel="stylesheet" href="css/swipebox.css">
					<script src="js/jquery.swipebox.min.js"></script> 
						<script type="text/javascript">
							jQuery(function($) {
								$(".swipebox").swipebox();
							});
						</script>
					<!-- Portfolio Ends Here -->
					<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
						<script type="text/javascript">
						$(function () {
							var filterList = {
								init: function () {
									// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});	
							},
							hoverEffect: function () {
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							}
						};
						// Run the show!
							filterList.init();
						});	
						</script>
		</div>				
	</div>
	<!--//portfolio-->
	<!--footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-left">
				<a href="index.html">Hospice</a>
			</div>
			<div class="footer-right">
				<p>© 2015 All rights reserved | Template by <a href="http://w3layouts.com/"> W3layouts</a></p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//footer-->
	<!--smooth-scrolling-of-move-up-->
		<script type="text/javascript">
			$(document).ready(function() {
				/*
				var defaults = {
					containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
				};
				*/
				
				$().UItoTop({ easingType: 'easeOutQuart' });
				
			});
		</script>
		<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!--//smooth-scrolling-of-move-up-->
</body>
</html>	